{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ocean Drugs</title>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">


    <link rel="stylesheet"  href="{% static 'css/common.css' %}" type="text/css" />
    <link rel="stylesheet"  href="{% static 'css/main.css' %}" type="text/css" />
    <link rel="stylesheet"  href="{% static 'css/styles.css' %}" type="text/css" />
    <link rel="stylesheet"  href="{% static 'css/bootstrap.min.css' %}" type="text/css" />
    <link rel="stylesheet"  href="{% static 'public/font-awesome/css/font-awesome.css' %}" type="text/css" />
    <link rel="stylesheet"  href="{% static 'css/all.min.css' %}" type="text/css" />

    <script type="text/javascript" src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.lazyload.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'public/layer/layer.js' %}"></script>
    <script type="text/javascript" src="{% static 'public/superslide/jquery.SuperSlide.2.1.3.js' %}"></script>

    <script type="text/javascript">
    {#var baseurl = "<?php echo $this->context->_baseUrl;?>";#
    </script>



</head>
<body>

{#  {% include 'header.html' %}#}
<header class="navbar navbar-inverse navbar-static" id="top"   v-loading="loading"  style="background-color: rgba(0, 0, 0, 0.23); ">
	    <div class="container">
	        <div id="main-nav-head" class="navbar-header">





                        <div class="flex-row f-j-start" style="width:100%">
                            <div class="flex" style="width:80px;padding:10px;">
                                <a href="/" class="" style="text-decoration: none;">
                                    <img src="{% static 'assets/images/logo.png' %}" alt="" style="display:block;width:100%;">
                                </a>
                            </div>
                            <div class="logoname flex-col justify-center" style="flex:1;">
                                <div class="flex items-center" style="color:#fff;font-size:16px;font-weight: bold">EMNPD</div>
                                <div class="flex items-center" style="color:#fff;font-size:13px;">Extensive Marine Natural Products Database</div>
                            </div>
                        </div>


{#	            <button type="button" class="navbar-toggle" data-toggle="collapse" aria-label="Toggle navigation" data-target=".navbar-collapse"><i class="fa fa-inverse fa-bars"></i></button>#}
	        </div>

	        <div class="navbar-collapse  navbar-right">
	            <ul id="main-nav" class="nav navbar-nav navbar-main-menu nav" v-if="navs && navs.length > 0">
                <!-- 显示示例链接 -->

                    {% for item in navs %}
                   	<li class="dropdown "  @mouseleave="handleLeave(item)"  @click="handleEnter(item)">
							<div class=" title dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false" @click="(item.children &&  item.children!=null)?toggleSubmenu(item):redirect(item.link)"  >
								{{ item.title }}
								<span class="caret" v-if="item.children  &&  item.children!=null"></span>
							</div>
						<ul class="dropdown-menu" v-if="item.children  &&  item.children!=null" :class="[item.isExpand? 'dropdown-menu-active' : '']"  >
						<li  v-for="(itemm, indexx) in item.children"><span @click="redirect(itemm.link)" tabindex="-1">{{itemm.title}}</span></li>
						</ul>
                    </li>
                    {% endfor %}



					</ul>

	          <!--  <div class="nav navbar-nav navbar-right">
	                <ul id="login-nav" class="nav navbar-nav navbar-main-menu nav"><li><a href="/login">Login</a></li>

					</ul>
						 </div> -->

<!--	            <div class="nav navbar-nav navbar-right">-->
<!--                  <form id="search-form" class="navbar-form" action="/search" method="get">-->
<!--                  <input type="hidden" name="version" value="2.0">-->
<!--                  <input type="hidden" name="type" value="api">-->
<!--                  <div class="form-group nospace">-->
<!--                  <div class="input-group">-->
<!--                  <input type="text" class="form-control" id="search" name="q" placeholder="Search API…" autocomplete="off" value="" style="width: 226px;">-->
<!--                  </div>-->
<!--                  </div>-->
<!--                  <div id="search-resultbox" style="width: 350px; display: none;"></div>-->
<!--                  </form>-->
<!--              </div>-->


	        </div>
	    </div>
	</header>
	<header class="navbar navbar-inverse navbar-static" id="top"   v-loading="loading"  style="background-color: rgba(0, 0, 0, 0.23); ">
	    <div class="container">
	        <div id="main-nav-head" class="navbar-header">





                        <div class="flex-row f-j-start" style="width:100%">
                            <div class="flex" style="width:80px;padding:10px;">
                                <a href="/" class="" style="text-decoration: none;">
                                    <img src="{% static 'assets/images/logo.png' %}" alt="" style="display:block;width:100%;">
                                </a>
                            </div>
                            <div class="logoname flex-col justify-center" style="flex:1;">
                                <div class="flex items-center" style="color:#fff;font-size:16px;font-weight: bold">EMNPD</div>
                                <div class="flex items-center" style="color:#fff;font-size:13px;">Extensive Marine Natural Products Database</div>
                            </div>
                        </div>


{#	            <button type="button" class="navbar-toggle" data-toggle="collapse" aria-label="Toggle navigation" data-target=".navbar-collapse"><i class="fa fa-inverse fa-bars"></i></button>#}
	        </div>

	        <div class="navbar-collapse  navbar-right">
	            <ul id="main-nav" class="nav navbar-nav navbar-main-menu nav" v-if="navs && navs.length > 0">
                <!-- 显示示例链接 -->

                    {% for item in navs %}
                   	<li class="dropdown "  @mouseleave="handleLeave(item)"  @click="handleEnter(item)">
							<div class=" title dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false" @click="(item.children &&  item.children!=null)?toggleSubmenu(item):redirect(item.link)"  >
								{{ item.title }}
								<span class="caret" v-if="item.children  &&  item.children!=null"></span>
							</div>
						<ul class="dropdown-menu" v-if="item.children  &&  item.children!=null" :class="[item.isExpand? 'dropdown-menu-active' : '']"  >
						<li  v-for="(itemm, indexx) in item.children"><span @click="redirect(itemm.link)" tabindex="-1">{{itemm.title}}</span></li>
						</ul>
                    </li>
                    {% endfor %}



					</ul>

	          <!--  <div class="nav navbar-nav navbar-right">
	                <ul id="login-nav" class="nav navbar-nav navbar-main-menu nav"><li><a href="/login">Login</a></li>

					</ul>
						 </div> -->

<!--	            <div class="nav navbar-nav navbar-right">-->
<!--                  <form id="search-form" class="navbar-form" action="/search" method="get">-->
<!--                  <input type="hidden" name="version" value="2.0">-->
<!--                  <input type="hidden" name="type" value="api">-->
<!--                  <div class="form-group nospace">-->
<!--                  <div class="input-group">-->
<!--                  <input type="text" class="form-control" id="search" name="q" placeholder="Search API…" autocomplete="off" value="" style="width: 226px;">-->
<!--                  </div>-->
<!--                  </div>-->
<!--                  <div id="search-resultbox" style="width: 350px; display: none;"></div>-->
<!--                  </form>-->
<!--              </div>-->


	        </div>
	    </div>
	</header>





